import { createFileRoute } from '@tanstack/react-router'
import { userQueryOptions } from '@/lib/api'
import { useQuery } from '@tanstack/react-query'
import { Button } from '@/components/ui/button'


export const Route = createFileRoute('/_authenticated/profile')({
  component: Profile,
})

function Profile() {
  const { isPending, error, data } = useQuery(userQueryOptions)

  if (isPending) return 'Loading...'
  if (error) return 'Error fetching user profile'

  return <div>
    <p className='mb-5'>Hello {data.user.family_name}</p>
    <Button><a href="/api/logout">Logout</a></Button>
  </div>
}
